<template>
  <a-tabs @change="(val)=>{apiParams.serviceStatus = val}" :default-active-key="serviceStatus">
    <a-tab-pane key="ALL" title="全部"></a-tab-pane>
    <a-tab-pane key="REFUSE" title="退货待处理"></a-tab-pane>
    <a-tab-pane key="COMPLETED" title="退货待商家收货"></a-tab-pane>
    <a-tab-pane key="CANCELLED" title="已关闭"></a-tab-pane>
  </a-tabs>
  <a-card class="general-card" title="退货管理" :bordered="false">
    <PickSearchColumn
      :columns="columnsSearch"
      @reset="
        (val) => {
          apiParams = { ...apiParams, ...val };
        }
      "
      @search="
        (val) => {
          apiParams = { ...apiParams, ...val };
        }
      "
    >
    </PickSearchColumn>

    <PickTablePage
      ref="tablePageRef"
      :columns="columnsTable"
      :methods="sortMethods"
      :api-params="apiParams"
      :api="afterSaleOrderPage"
    />
  </a-card>
</template>

<script setup lang="ts">
import { PickSearchColumn, PickTablePage } from '@pickmall/ui-v3-components';

import { SearchRule, MethodsRule, ColumnsDataRule } from '@/types/global';
import { afterSaleOrderPage } from '@/api/order';
import { serviceStatus, groupAfterSaleStatus } from '@/utils/tools';
import { ref } from 'vue';

const tablePageRef = ref('');

const columnsSearch: Array<SearchRule> = [
  {
    label: '商品',
    model: 'goodsName',
    disabled: false,
    input: true,
  },
  {
    label: '会员名称',
    model: 'memberName',
    disabled: false,
    input: true,
  },
  {
    label: '订单编号',
    model: 'sn',
    disabled: false,
    input: true,
  },
  {
    label: '申请时间',
    disabled: false,
    datePicker: {
      type: 'range',
    },
  },

  {
    label: '售后状态',
    model: 'afterSaleStatus',
    disabled: false,
    select: { options: groupAfterSaleStatus },
  },
];
const serviceStatus = ref<string>('ALL')
const apiParams = ref({
  serviceType: 'RETURN_GOODS',
  serviceStatus:serviceStatus.value
});

const columnsTable: ColumnsDataRule[] = [
  {
    title: '售后单号',
    dataIndex: 'sn',
  },
  {
    title: '订单号',
    dataIndex: 'orderSn',
  },

  {
    title: '商品名称',
    dataIndex: 'goodsName',
    width: 300,
    slot: true,
    ellipsis: false,
    slotData: {
      goods: {
        goodsImage: 'goodsImage',
        goodsName: 'goodsName',
      },
    },
  },
  {
    title: '申请退款金额',
    dataIndex: 'applyRefundPrice',
    currency: true,
  },
  {
    title: '会员名称',
    dataIndex: 'memberName',
  },
  {
    title: '状态',
    dataIndex: 'serviceStatus',
    slot: true,
    width: 180,
    slotData: {
      tag: serviceStatus,
    },
  },
  {
    title: '申请时间',
    width: 200,
    dataIndex: 'createTime',
  },
];

const sortMethods: MethodsRule = {
  title: '操作',
  width: 100,
  methods: [
    {
      title: '查看',
      callback: 'detail',
    },
  ],
};
</script>
